<template>
  <div>
    <a-modal :visible="visible" title="管理标签" @before-open="open" :footer="false" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <a-button type="text" @click="addTag">添加标签</a-button>

      <a-table size="mini" style="margin-top: 10px" class="table-single-line" row-key="id" :loading="loading" :data="dataList" :pagination="false" :scroll="{ y: '400px' }">
        <template #columns>
          <a-table-column title="颜色" #cell="{ record }" align="center" :width="80">
            <span v-if="record.id && !record.isEdit" class="color" :style="{ backgroundColor: record.color }"></span>

            <a-popover v-else>
              <span class="color" :style="{ backgroundColor: record.color, cursor: 'pointer' }"></span>
              <template #content>
                <div class="color-con">
                  <div class="color-item" @click="record.color = item" v-for="item of colorList" :key="item" :style="{ backgroundColor: item }"></div>
                </div>
              </template>
            </a-popover>
          </a-table-column>
          <a-table-column title="标签名字" #cell="{ record }" align="center" :width="200">
            <span v-if="record.id && !record.isEdit">{{ record.name }}</span>
            <a-input placeholder="请输入标签名称" v-else v-model="record.name"></a-input>
          </a-table-column>
          <a-table-column title="操作" #cell="{ record, rowIndex }" align="center" :width="60">
            <div v-if="record.id && !record.isEdit">
              <a-button type="text" @click="record.isEdit = true">编辑</a-button>
              <!-- <a-button type="text" style="margin-left: 10px; color: red">删除</a-button> -->
            </div>
            <div v-else>
              <a-button type="text" @click="updataTag(record)">保存</a-button>
              <a-button type="text" style="margin-left: 10px" @click="cancel(record, indexedDB)">取消</a-button>
            </div>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { saveOrUpdateBatch, tagListByParam } from '@/api/product'
  import { Message, TableData } from '@arco-design/web-vue'
  export default defineComponent({
    // props: ['tagList'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        dataList: [],
        // colorList: ['#8EACC8', '#DDE7F8', '#FDF6D6', '#F3E9D7', '#B5C699', '#DED8ED', '#B6D4E1', '#E6EED6', '#EADDA2', '#D6F1EE', '#EDDAE1', '#EFD3C8'],
        colorList: ['#3359aa', '#2b80db', '#2ea19d', '#35a43d', '#d09400', '#db6700', '#cc2417', '#bb1074', '#6535ff', '#242936', '#5a90fd', '#53a3e8', '#4dc8c2', '#5cbc41', '#eba800', '#f28e0a', '#df422d', '#c44190', '#7c57ef', '#50565f'],
        loading: false,
      })

      const open = () => {
        getTagList()
      }
      const handleOk = () => {}
      const handleCancel = () => {
        emit('save')
        getTagList()
        visible.value = false
      }

      const addTag = () => {
        let obj = { name: '', color: '#8EACC8' }
        data.dataList.unshift(obj)
      }

      const cancel = (item: any, index: string) => {
        if (item.id) {
          item.isEdit = false
          item.name = item.oldNmae
        } else {
          data.dataList.splice(index, 1)
        }
      }

      const updataTag = async (item: TableData) => {
        item.source = 'PRODUCT'
        let params = [item]
        const res: any = await saveOrUpdateBatch(params)
        if (res.code == 'SUCCESS') {
          !item.id ? Message.success('添加成功') : Message.success('编辑成功')
          getTagList()
        }
      }

      const getTagList = async () => {
        data.loading = true
        const res = await tagListByParam({ source: 'PRODUCT' })
        data.dataList = res?.data.map((e: any) => {
          e.oldNmae = e.name
          return e
        })
        data.loading = false
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        addTag,
        cancel,
        updataTag,
      }
    },
  })
</script>

<style lang="less" scoped>
  .title {
    margin: 5px 0;
    color: #ababab;
  }

  .tag {
    color: #2c4358;
    margin: 10px 10px 10px 0;
  }

  .color {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    // cursor: pointer;
  }

  .color-con {
    display: flex;
    flex-wrap: wrap;
    width: 200px;
    // border: 1px solid #ababab;
    border-bottom: none;
    border-right: none;
    .color-item {
      width: 40px;
      height: 40px;
      color: white;
      margin: 5px;
      border-bottom: 1px solid #ababab;
      border-right: 1px solid #ababab;
      // border-left: 1px solid black;
    }
  }
</style>
